<template>
    <el-form :model="loginForm" status-icon :rules="loginRules" ref="ruleForm"  label-width="80px" class="demo-ruleForm" id="loginForm">
        <el-form-item label="账号:" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login()" >登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                loginForm:{},
                loginRules:{
                    username:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
            login(){
                this.$http.post("http://localhost:8888/user/login",this.loginForm).then(result=>{
                   if (result.data.code===2000){
                       this.$message.success(result.data.msg);
                       //获取服务器响应的token值。保存LocalStorage
                       localStorage.setItem("token",result.data.data);
                       //跳转路由 不能使用location.href
                       this.$router.push("/user")
                   }else {
                       this.$message.error(result.data.msg);
                   }
                })
            }
        }
    }
</script>

<style scoped>

</style>